<template>
  <div>
    <el-drawer v-model="drawer" title="I am the title" direction="rtl">
      <user-select v-model="list"></user-select>
    </el-drawer>
    <el-button @click="openDrawer" class="margin-right"><i class="fa fa-fw fa-user"></i>选择用户</el-button>
    <span> {{ tips }}</span>
  </div>
</template>
<script setup>
import {computed, ref} from "vue";
import UserSelect from "./user-select.vue";

/**
 * 用户选择 - 按钮
 *
 * 点击之后，从侧面弹出选择面板，占用一行空间
 */
const list = ref([]);
const drawer = ref(false);

const openDrawer = () => {
    drawer.value = true;
}

const tips = computed(() => {
    if (list.value.length === 0) {
        return '';
    } else if (list.value.length === 1) {
        return list.value[0].userName;
    } else {
        return list.value[0].userName + ' …等' + list.value.length + '个用户';
    }
});

</script>
<style scoped>

</style>